@rem:16rem;
html{
    height: 100%;
     overflow: hidden;
}
body{
    margin: 0;
    height: 100%;
    overflow: hidden;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
p{
    margin: 0;
}
#bgm{
    background: url(../img/bgmusic.svg) no-repeat;
    width: 30/@rem;
    height: 30/@rem;
    background-size: 100% 100%;
    position: absolute;
    top: 20/@rem;
    right: 20/@rem;
    z-index: 1000;
    animation: xuan 1s linear  infinite ;
    -webkit-animation: xuan 1s linear  infinite ;
}
@keyframes xuan{
    0%{
        transform:rotate(0deg);
    }
    10%{
        transform:rotate(36deg);
    }
    20%{
        transform:rotate(72deg);
    }
    30%{
        transform:rotate(108deg);
    }
    40%{
        transform:rotate(144deg);
    }
    50%{
        transform:rotate(180deg);
    }
    60%{
        transform:rotate(216deg);
    }
    70%{
        transform:rotate(252deg);
    }
    80%{
        transform:rotate(288deg);
    }
    90%{
        transform:rotate(324deg);
    }
    100%{
        transform:rotate(360deg);
    }
}
@-webkit-keyframes xuan{
    0%{
        transform:rotate(0deg);
    }
    10%{
        transform:rotate(36deg);
    }
    20%{
        transform:rotate(72deg);
    }
    30%{
        transform:rotate(108deg);
    }
    40%{
        transform:rotate(144deg);
    }
    50%{
        transform:rotate(180deg);
    }
    60%{
        transform:rotate(216deg);
    }
    70%{
        transform:rotate(252deg);
    }
    80%{
        transform:rotate(288deg);
    }
    90%{
        transform:rotate(324deg);
    }
    100%{
        transform:rotate(360deg);
    }
}
#page_one{
    position: relative;
    width: 100%;
    height: 100%;
    background: url(../img/bg11.jpg) no-repeat;
    background-size:100% 100% ;
    display: none;
    overflow: hidden;
}
#list{
    position: absolute;
    width: 100%;
    height: 100%;
//  overflow: hidden;
}
#list li{
    display: none;
    transform: scale(1.5);
    -webkit-transform: scale(1.5);;
    transition: 1s;
    width: 114/@rem;
    height: 174/@rem;
    position: absolute;
}
#list li:nth-child(1){
    top: 243/@rem;
    left: 107/@rem;
    background: url(../img/chuan11.png);
    background-size:100% 100% ;
    z-index: 1;
}
#list li:nth-child(2){
    top: 171/@rem;
    left: 20/@rem;
    background: url(../img/boli11.png);
    background-size:100% 100% ;
    z-index: 2;
}
#list li:nth-child(3){
    top: 63/@rem;
    left: 67/@rem;
    background: url(../img/bg2.png);
    background-size:100% 100% ;
    z-index: 3;
}
#list li:nth-child(4){
    top: 108/@rem;
    left:-24/@rem;
    background: url(../img/bj5.png);
    background-size:100% 100% ;
    z-index: 4;
}
#list li:nth-child(5){
    top: 216/@rem;
    left:59/@rem;
    background: url(../img/bg1.png);
    background-size:100% 100% ;
    z-index: 5;
}
#list li:nth-child(6){
    top: 51/@rem;
    left:16/@rem;
    background: url(../img/xi.png);
    background-size:100% 100% ;
    z-index: 6;
}
#list li:nth-child(7){
    top: 63/@rem;
    left:154/@rem;
    background: url(../img/bg9.png);
    background-size:100% 100% ;
    z-index: 7;
}
#list li:nth-child(8){
    top: 167/@rem;
    left:189/@rem;
    background: url(../img/bg8.png);
    background-size:100% 100% ;
    z-index: 8;
}
#list li:nth-child(9){
    top: 80/@rem;
    left:107/@rem;
    background: url(../img/bg6.png);
    background-size:100% 100% ;
    z-index: 9;
}
#list li:nth-child(10){
    top: 54/@rem;
    left:200/@rem;
    background: url(../img/bg7.png);
    background-size:100% 100% ;
    z-index: 10;
}
#list li:nth-child(11){
    top: 115/@rem;
    left:236/@rem;
    background: url(../img/bg4.png);
    background-size:100% 100% ;
    z-index: 11;
}
#list li:nth-child(12){
    top: 213/@rem;
    left:147/@rem;
    background: url(../img/bg3.png);
    background-size:100% 100% ;
    z-index:12;
}
#list li:nth-child(13){
    width: 171/@rem;
    height: 142/@rem;
    top: 94/@rem;
    left:48/@rem;
    background: url(../img/bi2.png);
    -webkit-transform: rotate(90deg) scale(1.5);
    transform: rotate(90deg) scale(1.5);
    background-size:100% 100% ;
    z-index: 13;
}
#list li:nth-child(14){
    width: 321/@rem;
    height: 86/@rem;
    top: 0/@rem;
    left:-1/@rem;
    z-index: 14;
}
#list li:nth-child(14) .zi{
//  width:100%;
//  height: 100%;
    padding: 7/@rem 15/@rem;
    text-align: center;;
}
.zi p{
    font-size: 14/@rem;
    line-height:21/@rem ;
   font-family: arial;
}
#next{
    opacity: 0;
    transition:1s;
    position: absolute;
    width: 77/@rem;
    height: 172/@rem;
    left: 127/@rem;
    bottom: -20%;
    background: url(../img/next.png) no-repeat;
    background-size:100% 100% ;
}
#page_two{
    width: 100%;
    height: 100%;
    background: url(../img/bg11.jpg) no-repeat;
    background-size:100% 100% ;
    display: none;
     position: relative;
     overflow: hidden;
}
#list1{
    position: absolute;
    width: 100%;
    height: 100%;
}
#list1 li{
   
    opacity: 0;
//  transform: scale(1.5); 
    transition: 1s;
    width: 420/@rem;
    height: 634/@rem;
    position: absolute;
     display: none;
}
#list1 li:nth-child(1){
    top: -193/@rem;
    left:-106/@rem;
    background: url(../img/bg3.png);
    transform: rotateZ(12deg) scale(1.5);
    -webkit-transform: rotateZ(12deg) scale(1.5);;
    background-size:100% 100% ;
    z-index: 1;
}
#list1 li:nth-child(2){
    top: -152/@rem;
    left:75/@rem;
    background: url(../img/bg6.png);
    transform: rotateZ(46deg) scale(1.5);
    -webkit-transform: rotateZ(46deg) scale(1.5);;
    background-size:100% 100% ;
    z-index: 2;
}
#list1 li:nth-child(3){
    top: 39/@rem;
    left:77/@rem;
    background: url(../img/bg4.png);
    transform: rotateZ(332deg) scale(1.5);
    -webkit-transform: rotateZ(332deg) scale(1.5);;
    background-size:100% 100% ;
    z-index: 3;
}
#list1 li:nth-child(4){
    top: 39/@rem;
    left:77/@rem;
    background: url(../img/bg8.png);
    transform: rotateZ(322deg) scale(1.5);
    -webkit-transform: rotateZ(322deg) scale(1.5);;
    background-size:100% 100% ;
    z-index: 4;
}
#list1 li:nth-child(5){
    top: -97/@rem;
    left:-158/@rem;
    background: url(../img/bg9.png);
    transform: rotateZ(330deg) scale(1.5);
    -webkit-transform: rotateZ(330deg) scale(1.5);;
    background-size:100% 100% ;
    z-index: 5;
}
#list1 li:nth-child(6){
    top: -63/@rem;
    left:-19/@rem;
    background: url(../img/bg7.png);
    transform: rotateZ(17deg) scale(1.5);
    -webkit-transform: rotateZ(17deg) scale(1.5);;
    background-size:100% 100% ;
    z-index: 6;
}
#list1 li:nth-child(7){
    width: 272/@rem;
    height: 57/@rem;
    top: 232/@rem;
    left:22/@rem;
    background:#fff;
    background-size:100% 100% ;
    z-index: 7;
}
#list1 li:nth-child(9){
    width: 272/@rem;
    height: 57/@rem;
    top: 232/@rem;
    left:22/@rem;
    background: url(../img/zi2.png);
    background-size:100% 100% ;
    z-index: 8;
}
#list1 li:nth-child(8){
    width:302/@rem;
    height:296/@rem;
    top: 265/@rem;
    left:20/@rem;
    background: url(../img/bi2.png);
    transform: rotateZ(90deg) scale(1.5);
    -webkit-transform: rotateZ(90deg) scale(1.5);;
    background-size:100% 100% ;
    z-index: 9;
}
#list1 li:nth-child(10){
    width:78/@rem;
    height:161/@rem;
     bottom: -20%;
    left:18/@rem;
    background: url(../img/back.png);
    background-size:100% 100% ;
    z-index: 10;
    animation: rotate  3s infinite;
    -webkit-animation: rotate  3s infinite;;
}
#list1 li:nth-child(11){
    width:78/@rem;
    height:161/@rem;
     bottom: -20%;
    left:95/@rem;
    background: url(../img/next.png);
    background-size:100% 100% ;
    z-index: 11;
    animation: rotate 3s infinite;
    -webkit-animation: rotate 3s infinite;;
}
@keyframes rotate{
    0%{
        transform: rotate(-15deg);
    }
    50%{
        transform: rotate(15deg);
    }
    100%{
        transform: rotate(-15deg);
    }
}
@-webkit-keyframes rotate{
    0%{
        transform: rotate(-15deg);
    }
    50%{
        transform: rotate(15deg);
    }
    100%{
        transform: rotate(-15deg);
    }
}
#page_three{
    width: 100%;
    height: 100%;
//  background: url(../img/bg11.jpg) no-repeat;
    background-size:100% 100% ;
    display: none;
     position: relative;
     overflow: hidden;
}
#page3{
    height: 100%;
//  position: absolute;
}
#list3{
    width: 100%;
    height: 100%;
//  position: absolute;
}
#list3 li{
    position: absolute;
    display: none;
    opacity: 0;
}
#list3 li:nth-child(1){
    width: 726/@rem;
    height:100%;
     top:0/@rem;
     opacity: 0.5;
    left: -202/@rem;
    background: url(../img/bg11.png) no-repeat;
    background-size: 100% 100%;
    transform: rotateZ(270deg);
    -webkit-transform: rotateZ(270deg);;
    z-index: 1;
}
#list3 li:nth-child(2){
    width: 727/@rem;
    height:100%;
    opacity: 0.5;
    top: 0/@rem;
    left: -630/@rem;
    background: url(../img/bg111.png) no-repeat;
    background-size: 100% 100%;
    transform: rotateZ(270deg);
    -webkit-transform: rotateZ(270deg);;
    z-index: 2;
}
//#list3 li:nth-child(2){
//  width: 800/@rem;
//  height:700/@rem;
//  top: -80/@rem;
//  left: -630/@rem;
//  background: url(../img/bg111.png) no-repeat;
//  background-size: 100% 100%;
//  transform: rotateZ(270deg);
//  -webkit-transform: rotateZ(270deg);;
//  z-index: 2;
//}
#list3 li:nth-child(3){
    width: 199/@rem;
    height:112/@rem;
    top: 20/@rem;
    left: 108/@rem;
//  background: url(../img/bg111.png) no-repeat;
//  background-size: 100% 100%;
//  transform: rotateZ(270deg);
    z-index: 3;
}
#list3 li:nth-child(4){
    width: 266/@rem;
    height:292/@rem;
    bottom:2%;
    left: -500/@rem;
    background: url(../img/dan5.png) no-repeat;
    background-size: 100% 100%;
//  transform: rotateZ(270deg);
    z-index: 4;
    display: block;
}
#list3 li:nth-child(5){
    width:100%;
    height:100%;
    transition:4s;
    background: url(../img/bg11.jpg) no-repeat;
    background-size: 100% 100%;
    z-index: 5;
}
#list3 li:nth-child(6){
    width:402/@rem;
    height:608/@rem;
    top: -92/@rem;
    left: -59/@rem;
     transition:1s;
    background: url(../img/bg3.png) no-repeat;
    transform: scale(1.5) rotateZ(351deg);
    -webkit-transform: scale(1.5) rotateZ(351deg);;
    background-size: 100% 100%;
    z-index: 6;
}
#list3 li:nth-child(7){
    width:271/@rem;
    height:554/@rem;
    top: 56/@rem;
    left: 220/@rem;
     transition:2s;
    background: url(../img/bi.png) no-repeat;
//  transform: rotateZ(351deg);
    background-size: 100% 100%;
    z-index: 7;
}
#list3 li:nth-child(8){
    width:78/@rem;
    height:161/@rem;
     bottom: -20%;
    left:160/@rem;
    background: url(../img/back.png);
    background-size:100% 100% ;
    z-index: 10;
    animation: rotate  3s infinite;
    -webkit-animation: rotate  3s infinite;;
}
#list3 li:nth-child(9){
    width:78/@rem;
    height:161/@rem;
     bottom: -20%;
    left:240/@rem;
    background: url(../img/next.png);
    background-size:100% 100% ;
    z-index: 11;
    animation: rotate 3s infinite;
    -webkit-animation: rotate 3s infinite;;
}
@keyframes rotate{
    0%{
        transform: rotate(-15deg);
    }
    50%{
        transform: rotate(15deg);
    }
    100%{
        transform: rotate(-15deg);
    }
}
@-webkit-keyframes rotate{
    0%{
        transform: rotate(-15deg);
    }
    50%{
        transform: rotate(15deg);
    }
    100%{
        transform: rotate(-15deg);
    }
}
#page_four{
    width: 100%;
    height: 100%;
//  background: url(../img/bg11.jpg) no-repeat;
    background-size:100% 100% ;
    display: none;
     position: relative;
     overflow: hidden;
}
#page4{
    height: 100%;
//  position: absolute;
}
#list4{
    width: 100%;
    height: 100%;
//  position: absolute;
}
#list4 li{
    position: absolute;
    display: none;
    opacity: 0;
}
#list4 li:nth-child(1){
    width: 753/@rem;
    height:100%;
    left: -270/@rem;
    top:0/@rem;
    opacity: 0.5;
    background: url(../img/hen11.png) no-repeat;
    background-size: 100% 100%;
    transform: rotateZ(270deg);
    -webkit-transform: rotateZ(270deg);;
    z-index: 1;
}
#list4 li:nth-child(2){
    width: 754/@rem;
    height:100%;
    left: -698/@rem;
    top:0/@rem;
     opacity: 0.5;
    background: url(../img/hen1.png) no-repeat;
    background-size: 100% 100%;
    transform: rotateZ(270deg);
    -webkit-transform: rotateZ(270deg);;
    z-index: 2;
}
#list4 li:nth-child(4){
    width: 278/@rem;
    height: 46/@rem;
    left: 45/@rem;
    top: 0/@rem;
//  background: url(../img/hen11.png) no-repeat;
//  background-size: 100% 100%;
//  transform: rotateZ(270deg);
    z-index: 4;
}
#list4 li:nth-child(3){
    width: 183/@rem;
    height: 49/@rem;
    left: 48/@rem;
    top:0/@rem;
//  background: url(../img/hen11.png) no-repeat;
//  background-size: 100% 100%;
//  transform: rotateZ(270deg);
    z-index: 3;
}
#list4 li:nth-child(5){
    width:235/@rem;
    height: 275/@rem;
    left: -266/@rem;
    bottom: 10%;
    background: url(../img/dan8.png) no-repeat;
    background-size: 100% 100%;
    z-index: 5;
}
#list4 li:nth-child(6){
    width:377/@rem;
    height:100%;
    left: -28/@rem;
    top:0/@rem;
    transition:3s;
    background: url(../img/hou1.png) no-repeat;
    background-size: 100% 100%;
    z-index: 6;
}
//#list4 li:nth-child(7){
//  width:377/@rem;
//  height: 579/@rem;
//  left: -28/@rem;
//  top: 0/@rem;
//  background: url(../img/hou1.png) no-repeat;
//  background-size: 100% 100%;
//  z-index: 7;
//}
#list4 li:nth-child(7){
    width:420/@rem;
    height: 634/@rem;
    left: -81/@rem;
    transition:1s;
    top: -107/@rem;
    background: url(../img/bg8.png) no-repeat;
    background-size: 100% 100%;
    transform: scale(1.5) rotateZ(354deg);
    -webkit-transform: scale(1.5) rotateZ(354deg);;
    z-index: 7;
}
#list4 li:nth-child(8){
    width:271/@rem;
    height: 554/@rem;
    left: 280/@rem;
    top: -15/@rem;
    background: url(../img/bi.png) no-repeat;
    background-size: 100% 100%;
    z-index: 8;
}
#list4 li:nth-child(9){
    width:78/@rem;
    height:161/@rem;
    bottom: -20%;
    left:30/@rem;
    background: url(../img/back.png);
    background-size:100% 100% ;
    z-index: 9;
    animation: rotate 3s infinite;
    -webkit-animation: rotate 3s infinite;
}
#list4 li:nth-child(10){
    width:78/@rem;
    height:172/@rem;
     bottom: -20%;
    left:110/@rem;
    background: url(../img/next.png);
    background-size:100% 100% ;
    z-index: 10;
    animation: rotate 3s infinite;
    -webkit-animation: rotate 3s infinite;;
}
#page_five{
    width: 100%;
    height: 100%;
//  background: url(../img/bg11.jpg) no-repeat;
    background-size:100% 100% ;
//  display: none;
     position: relative;
     overflow: hidden;
}
#page5{
    height: 100%;
//  position: absolute;
}
#list5{
    width: 100%;
    height: 100%;
//  position: absolute;
}
#list5 li{
    position: absolute;
    display: none;
    opacity: 0;
}
#list5 li:nth-child(2){
    width: 316/@rem;
    height: 371/@rem;
    left: 42/@rem;
    transition:2s;
    background: url(../img/dan3.png);
    background-size: 100% 100%;
    top: 82/@rem;
    z-index: 1;
    
}
#list5 li:nth-child(1){
    width: 421/@rem;
    height: 620/@rem;
    left: -73/@rem;
     transition:3s ;
    background: url(../img/chuan2.jpeg);
    background-size: 100% 100%;
    top: -50/@rem;
    z-index: 1; 
}
#list5 li:nth-child(3){
    width: 254/@rem;
    height: 81/@rem;
    left:350/@rem;
//   transition:1s;
     opacity: 1;
//  background: url(../img/chuan2.jpeg);
//  background-size: 100% 100%;
    top: 300/@rem;
    z-index: 3; 
}
#list5 li:nth-child(4){
    width: 382/@rem;
    height: 586/@rem;
    left: -29/@rem;
     top: -1/@rem;
      transition:4s;
    background: url(../img/hou2.png);
    background-size: 100% 100%;
    z-index: 4; 
}
#list5 li:nth-child(5){
    width: 420/@rem;
    height: 634/@rem;
    left: -38/@rem;
     top: -95/@rem;
//   transition: 2s 1s;
    background: url(../img/bg6.png);
    transform: rotateZ(345deg) scale(1.5);
    -webkit-transform: rotateZ(345deg) scale(1.5);;
    background-size: 100% 100%;
    z-index: 5; 
}
#list5 li:nth-child(6){
    width: 271/@rem;
    height: 554/@rem;
    left:290/@rem;
    top: -13/@rem;
    background: url(../img/bi.png);
    background-size: 100% 100%;
    z-index: 6; 
}
#list5 li:nth-child(7){
    width:78/@rem;
    height:161/@rem;
     bottom: -20%;
    left:165/@rem;
    background: url(../img/back.png);
    background-size:100% 100% ;
    z-index: 7;
    animation: rotate 3s infinite;
    -webkit-animation: rotate 3s infinite;
}
#list5 li:nth-child(8){
    width:77/@rem;
    height:172/@rem;
     bottom: -20%;
    left:236/@rem;
    background: url(../img/next.png);
    background-size:100% 100% ;
    z-index: 8;
    animation: rotate 3s infinite;
    -webkit-animation: rotate 3s infinite;
}
#page_six{
    width: 100%;
    height: 100%;
//  background: url(../img/bg11.jpg) no-repeat;
    background-size:100% 100% ;
//  display: none;
     position: relative;
     overflow: hidden;
}
#page6{
    height: 100%;
//  position: absolute;
}
#list6{
    width: 100%;
    height: 100%;
//  position: absolute;
}
#list6 li{
    position: absolute;
    display: none;
    opacity: 0;
}
#list6 li:nth-child(1){
    width: 663/@rem;
    height: 100%;
    left: -452/@rem;
    top: 0/@rem;
    background: url(../img/dan4.png) no-repeat;
    background-size: 100% 100%;
    z-index: 1;
}
#list6 li:nth-child(2){
    width: 407/@rem;
    height: 416/@rem;
    left: -286/@rem;
    bottom: -15%;
    background: url(../img/dan2.png) no-repeat;
    background-size: 100% 100%;
    z-index: 2;
}
#list6 li:nth-child(3){
    width:212/@rem;
    height:90/@rem;
    top: 40/@rem;
    left:56/@rem;
    transition:2s 1s;
    z-index:3;
}
#list6 li:nth-child(4){
    width:375/@rem;
    height: 100%;
    left: -26/@rem;
    top:0/@rem;
      transition:4s;
    background: url(../img/hou3.png) no-repeat;
    background-size: 100% 100%;
    z-index: 4;
}
#list6 li:nth-child(5){
    width:420/@rem;
    height: 634/@rem;
    left: -34/@rem;
    top:-95/@rem;
    background: url(../img/bg9.png) no-repeat;
    background-size: 100% 100%;
    transform: rotateZ(17deg) scale(1.5);
    -webkit-transform: rotateZ(17deg) scale(1.5);;
    z-index: 5;
}
#list6 li:nth-child(6){
    width:271/@rem;
    height:554/@rem;
    left: 284/@rem;
    top:6/@rem;
    background: url(../img/bi.png) no-repeat;
    background-size: 100% 100%;
//  transform: rotateZ(17deg);
    z-index: 6;
}
#list6 li:nth-child(7){
    width:78/@rem;
    height:161/@rem;
     bottom: -20%;
    left:30/@rem;
    background: url(../img/back.png);
    background-size:100% 100% ;
    z-index: 7;
    animation: rotate 3s infinite;
    -webkit-animation: rotate 3s infinite;
}
#list6 li:nth-child(8){
    width:77/@rem;
    height:172/@rem;
     bottom: -20%;
    left:110/@rem;
    background: url(../img/next.png);
    background-size:100% 100% ;
    z-index: 8;
    animation: rotate 3s infinite;
     -webkit-animation: rotate 3s infinite;
}
#page_seven{
    width: 100%;
    height: 100%;
//  background: url(../img/bg11.jpg) no-repeat;
    background-size:100% 100% ;
//  display: none;
     position: relative;
     overflow: hidden;
}
#page7{
    height: 100%;
//  position: absolute;
}
#list7{
    width: 100%;
    height: 100%;
//  position: absolute;
}
#list7 li{
    position: absolute;
    display: none;
    opacity: 0;
}
#list7 li:nth-child(1){
    width: 556/@rem;
    height:110%;
    left: -138/@rem;
    top: 0/@rem;
    transition:2s;
    background: url(../img/dan6.png) no-repeat;
    background-size: 100% 100%;
    z-index: 1;
}
#list7 li:nth-child(2){
    width:227/@rem;
    height: 268/@rem;
    left: 65/@rem;
    top: 232/@rem;
    transition: 1s;
    transform: rotateY(-90deg);
    -webkit-transform: rotateY(-90deg);
    background: url(../img/dan7.png) no-repeat;
    background-size: 100% 100%;
    z-index: 2;
}
#list7 li:nth-child(3){
    width:23/@rem;
    height: 62/@rem;
    left: 188/@rem;
    top: 2/@rem;
    z-index: 3;
     transition: 2s;
    transform: rotateY(-90deg);
    -webkit-transform: rotateY(-90deg);
}
#list7 li:nth-child(4){
    width:23/@rem;
    height: 166/@rem;
    left: 212/@rem;
    top: 2/@rem;
    z-index: 4;
     transition: 2s;
    transform: rotateY(-90deg);
    -webkit-transform: rotateY(-90deg);
}
#list7 li:nth-child(5){
    width:23/@rem;
    height: 140/@rem;
    left: 160/@rem;
    top: 2/@rem;
    z-index: 5;
     transition: 2s;
    transform: rotateY(-90deg);
    -webkit-transform: rotateY(-90deg);
}
#list7 li:nth-child(6){
    width:375/@rem;
    height:100%;
    left: -26/@rem;
    transition:3s;
    top:0/@rem;
    background: url(../img/hou4.png) no-repeat;
    background-size: 100% 100%;
    z-index: 6;
}
#list7 li:nth-child(7){
    width:420/@rem;
    height: 634/@rem;
    left: -5/@rem;
    top: -68/@rem;
    background: url(../img/bg7.png) no-repeat;
    background-size: 100% 100%;
    transform: rotateZ(10deg) scale(1.5);
    -webkit-transform: rotateZ(10deg) scale(1.5);
    z-index: 7;
}
#list7 li:nth-child(8){
    width:271/@rem;
    height:554/@rem;
    left: 284/@rem;
    top:6/@rem;
    background: url(../img/bi.png) no-repeat;
    background-size: 100% 100%;
//  transform: rotateZ(17deg);
    z-index: 8;
}
#list7 li:nth-child(9){
    width:78/@rem;
    height:161/@rem;
     bottom: -20%;
    left:30/@rem;
    background: url(../img/back.png);
    background-size:100% 100% ;
    z-index: 9;
    animation: rotate 3s infinite;
    -webkit-animation: rotate 3s infinite;
}
#list7 li:nth-child(10){
    width:77/@rem;
    height:172/@rem;
     bottom: -20%;
    left:110/@rem;
    background: url(../img/next.png);
    background-size:100% 100% ;
    z-index: 10;
    animation: rotate 3s infinite;
    -webkit-animation: rotate 3s infinite;
}
#page_eight{
    width: 100%;
    height: 100%;
//  background: url(../img/bg11.jpg) no-repeat;
    background-size:100% 100% ;
//  display: none;
     position: relative;
     overflow: hidden;
}
#page8{
    height: 100%;
//  position: absolute;
}
#list8{
    width: 100%;
    height: 100%;
//  position: absolute;
}
#list8 li{
    position: absolute;
    display: none;
    opacity: 0;
}
#list8 li:nth-child(1){
    width: 376/@rem;
    height:100%;
    left: -28/@rem;
    top:0/@rem;
    transition:1.5s;
    background: url(../img/chuan.jpeg) no-repeat;
    background-size: 100% 100%;
    z-index: 1;
}
#list8 li:nth-child(2){
    width: 238/@rem;
    height: 81/@rem;
    left: 28/@rem;
    top:30/@rem;
     transition:1.5s;
    z-index: 2;
}
#list8 li:nth-child(3){
    width: 404/@rem;
    height: 318/@rem;
    left: -48/@rem;
    top: 202/@rem;
      transition:1.5s;
    background: url(../img/dan1.png) no-repeat;
    background-size: 100% 100%;
    z-index: 3;
}
#list8 li:nth-child(4){
    width: 376/@rem;
    height: 100%;
    left: -25/@rem;
    top: 0/@rem;
    transition:4s;
    background: url(../img/hou5.png) no-repeat;
    background-size: 100% 100%;
    z-index: 4;
}
#list8 li:nth-child(5){
    width: 420/@rem;
    height: 634/@rem;
    left: -32/@rem;
    top: -90/@rem;
    transform: scale(1.5);
    background: url(../img/bg4.png) no-repeat;
    background-size: 100% 100%;
    z-index: 5;
}
#list8 li:nth-child(6){
    width:271/@rem;
    height:554/@rem;
    left: 284/@rem;
    top:6/@rem;
    background: url(../img/bi.png) no-repeat;
    background-size: 100% 100%;
//  transform: rotateZ(17deg);
    z-index: 6;
}
#list8 li:nth-child(7){
    width:78/@rem;
    height:161/@rem;
     bottom: -20%;
    left:30/@rem;
    background: url(../img/back.png);
    background-size:100% 100% ;
    z-index: 9;
    animation: rotate 3s infinite;
    -webkit-animation: rotate 3s infinite;
}
#list8 li:nth-child(8){
    width:77/@rem;
    height:172/@rem;
     bottom: -20%;
    left:110/@rem;
    background: url(../img/next.png);
    background-size:100% 100% ;
    z-index: 8;
    animation: rotate 3s infinite;
    -webkit-animation: rotate 3s infinite;
}
#page_nine{
    width: 100%;
    height: 100%;
    background: url(../img/bg11.jpg) no-repeat;
    background-size:100% 100% ;
//  display: none;
     position: relative;
     overflow: hidden;
}
#page9{
    height: 100%;
//  position: absolute;
}
#list9{
    width: 100%;
    height: 100%;
//  position: absolute;
}
#list9 li{
    position: absolute;
    display: none;
    opacity: 0;
}
#list9 li:nth-child(1){
    width: 374/@rem;
    height:100%;
    left: -28/@rem;
    top: -80/@rem;
    transition:1s;
    background: url(../img/hou6.png) no-repeat;
    background-size: 100% 100%;
    z-index: 1;
}
#list9 li:nth-child(2){
    width: 376/@rem;
    height: 100%;
    left: -28/@rem;
    bottom: -80/@rem;
    transition:1s;
    background: url(../img/xiabai.png) no-repeat;
    background-size: 100% 100%;
    z-index: 2;
}
#list9 li:nth-child(3){
    width: 143/@rem;
    height: 143/@rem;
    left: 15/@rem;
    top: 143/@rem;
    transition:1s;
    transform: rotateZ(349deg);
    -webkit-transform: rotateZ(349deg);
    background: url(../img/gf.gif) no-repeat;
    background-size: 100% 100%;
    z-index: 3;
}
#list9 li:nth-child(4){
    width: 143/@rem;
    height: 143/@rem;
    left: 176/@rem;
    transition:1s;
    top: 143/@rem;
    transform: rotateZ(8deg);
    -webkit-transform: rotateZ(8deg);
    background: url(../img/gf.gif) no-repeat;
    background-size: 100% 100%;
    z-index: 4;
}
#list9 li:nth-child(5){
    width: 200/@rem;
    height: 60/@rem;
    left: 50/@rem;
    top: 260/@rem;
    transition:1s;
    transform: rotateZ(15deg);
    -webkit-transform: rotateZ(15deg);
    background: url(../img/zi1.png) no-repeat;
    background-size: 100% 100%;
    z-index: 10;
}
#list9 li:nth-child(6){
    width: 200/@rem;
    height:286/@rem;
    left:-12/@rem;
    top: 214/@rem;
    transition:1s;
    transform: rotateZ(349deg);
    -webkit-transform: rotateZ(349deg);
    background: url(../img/bg2.png) no-repeat;
    background-size: 100% 100%;
    z-index: 6;
}
#list9 li:nth-child(7){
    width: 200/@rem;
    height:286/@rem;
    left:148/@rem;
    top: 226/@rem;
    transition:1s;
    transform: rotateZ(8deg);
    -webkit-transform: rotateZ(8deg);
    background: url(../img/chuan11.png) no-repeat;
    background-size: 100% 100%;
    z-index: 7;
}

